<div class="ibox-content">
    <div class="form-group">
        <label class="form-inline" style="margin-left: 10px;">轮播图1:<input id="avatarSlect1"
                                                                          style="width: 205px;margin-left: 10px;"
                                                                          class="form-control" type="file">
        </label>
    </div>
    <img id="avatarPreview1" alt="image" src="" style="width: 150px;height:150px;"/>
    <div class="form-group">
        <label class="form-inline" style="margin-left: 10px;">轮播图2:<input id="avatarSlect2"
                                                                          style="width: 205px;margin-left: 10px;"
                                                                          class="form-control" type="file">
        </label>
    </div>
    <img id="avatarPreview2" alt="image" src="" style="width: 150px;height:150px;"/>
    <div class="form-group">
        <label class="form-inline" style="margin-left: 10px;">轮播图3:<input id="avatarSlect3"
                                                                          style="width: 205px;margin-left: 10px;"
                                                                          class="form-control" type="file">
        </label>
    </div>
    <input type="hidden" id="img1" value="">
    <input type="hidden" id="img2" value="">
    <input type="hidden" id="img3" value="">
    <img id="avatarPreview3" alt="image" src="" style="width: 150px;height:150px;"/>
    <div class="form-group" style="text-align: center">
        <button class="btn btn-primary" onclick="test()">保存</button>
    </div>
</div>
<script>

    $(function () {
        $.getJSON({
            url: bathpath + "/systemSetup/getImg",
            type: 'post',
            contentType: "application/json"
        }).done(function (data) {
            if (ajaxdatacheck(data)) {
                if (data.code == 1) {
                    $("#avatarPreview1").attr('src', path + "/myres/" + data.content[0].url);
                    $("#avatarPreview2").attr('src', path + "/myres/" + data.content[1].url);
                    $("#avatarPreview3").attr('src', path + "/myres/" + data.content[2].url);
                    /**/
                    $("#img1").val(data.content[0].url)
                    $("#img2").val(data.content[1].url)
                    $("#img3").val(data.content[2].url)
                } else {
                    swal("操作提示", "操作失败","error");
                }
            }
        })
            .fail(function (e) {
                console.error(e)
            })
            .always(function () {
                console.log('done!')
            })
        bindAvatar1();
        bindAvatar2();
        bindAvatar3();
    });

    function bindAvatar1() {
        $("#avatarSlect1").change(function () {
            var csrf = $("input[name='csrfmiddlewaretoken']").val();
            var formData = new FormData();
            formData.append("csrfmiddlewaretoken", csrf);
            formData.append('avatar', $("#avatarSlect1")[0].files[0]);
            /*获取上传的图片对象*/
            var fileName = $("#avatarSlect1")[0].files[0].name;
            if (!fileName.indexOf(".png") > 0 && !fileName.indexOf(".jpg") > 0) {
                alert(1)
                return false
            }
            $.ajax({
                url: bathpath + "/common/imageUpload",
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    console.log(data);
                    /*服务器端的图片地址*/
                    $("#avatarPreview1").attr('src', path + "/myres/" + data.content[0]);
                    /*预览图片*/
                    $("#avatar1").val(path + "/myres/" + data.content[0]);
                    /*将服务端的图片url赋值给form表单的隐藏input标签*/
                    $("#img1").val(data.content[0])
                }
            })
        })
    }

    function bindAvatar2() {
        $("#avatarSlect2").change(function () {
            debugger
            var csrf = $("input[name='csrfmiddlewaretoken']").val();
            var formData = new FormData();
            formData.append("csrfmiddlewaretoken", csrf);
            formData.append('avatar', $("#avatarSlect2")[0].files[0]);
            /*获取上传的图片对象*/
            var fileName = $("#avatarSlect2")[0].files[0].name;
            if (!fileName.indexOf(".png") > 0 && !fileName.indexOf(".jpg") > 0) {
                alert(2)
                return false
            }
            $.ajax({
                url: bathpath + "/common/imageUpload",
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    console.log(data);
                    /*服务器端的图片地址*/
                    $("#avatarPreview2").attr('src', path + "/myres/" + data.content[0]);
                    /*预览图片*/
                    $("#avatar2").val(path + "/myres/" + data.content[0]);
                    /*将服务端的图片url赋值给form表单的隐藏input标签*/
                    $("#img2").val(data.content[0])
                }
            })
        })
    }

    function bindAvatar3() {
        $("#avatarSlect3").change(function () {
            var csrf = $("input[name='csrfmiddlewaretoken']").val();
            var formData = new FormData();
            formData.append("csrfmiddlewaretoken", csrf);
            formData.append('avatar', $("#avatarSlect3")[0].files[0]);
            /*获取上传的图片对象*/
            var fileName = $("#avatarSlect3")[0].files[0].name;
            if (!fileName.indexOf(".png") > 0 && !fileName.indexOf(".jpg") > 0) {
                alert(3)
                return false
            }
            $.ajax({
                url: bathpath + "/common/imageUpload",
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    console.log(data);
                    /*服务器端的图片地址*/
                    $("#avatarPreview3").attr('src', path + "/myres/" + data.content[0]);
                    /*预览图片*/
                    $("#avatar3").val(path + "/myres/" + data.content[0]);
                    /*将服务端的图片url赋值给form表单的隐藏input标签*/
                    $("#img3").val(data.content[0])
                }
            })
        })
    }

    function test() {
        var data ={
            "img1":$("#img1").val(),
            "img2":$("#img2").val(),
            "img3":$("#img3").val()
        }
        $.getJSON({
            url: bathpath + "/systemSetup/editImg",
            type: 'post',
            contentType: "application/json",
            data:JSON.stringify(data)
        }).done(function (data) {
            if (ajaxdatacheck(data)) {
                if (data.code == 1) {
                    swal("操作提示", "操作成功","success");
                    $("#avatarPreview1").attr('src', path + "/myres/" + data.content[0].url);
                    $("#avatarPreview2").attr('src', path + "/myres/" + data.content[1].url);
                    $("#avatarPreview3").attr('src', path + "/myres/" + data.content[2].url);
                } else {
                    swal("操作提示", "操作失败","error");
                }
            }
        })
            .fail(function (e) {
                console.error(e)
            })
            .always(function () {
                console.log('done!')
            })
    }
</script>